<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{commonJs}" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body layout:fragment="content">
<div id="passengerResidenceInfoLists">
    <div id="operator" style="padding:0 0 15px 15px">
<!--        <el-button type="primary" round v-on:click="add">新增旅客入住信息</el-button>-->
        <el-button type="success" round v-on:click="refresh" icon="el-icon-refresh">刷新</el-button>
        <el-button round type="primary" v-on:click="query" icon="el-icon-search">搜索</el-button>
        <el-button round @click="resetForm('searchForm')" icon="el-icon-refresh-left">重置</el-button>
    </div>

    <el-card shadow="never" style="margin-bottom: 20px;" class="box-card">
        <el-form ref="searchForm" v-model="params">

            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-date-picker
                                v-model="params.checkInStatrTime"
                                type="date"
                                value-format="yyyyMMdd"
                                placeholder="选择入住日期">
                        </el-date-picker>
                    </div>
                </el-col>

                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-date-picker
                                v-model="params.checkInEndTime"
                                type="date"
                                value-format="yyyyMMdd"
                                placeholder="选择退房日期">
                        </el-date-picker>
                    </div>
                </el-col>

            </el-row>

            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-input placeholder="旅客姓名" v-model="params.passengerName"></el-input>
                    </div>

                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-input placeholder="房源名称" v-model="params.hotelName"></el-input>
                    </div>
                </el-col>
            </el-row>
        </el-form>

    </el-card>

    <el-table :data="page.records" style="width: 100%">
        <el-table-column
                type="index"
                label="序号"
                width="70">
        </el-table-column>
        <el-table-column label="旅客姓名">
            <template slot-scope="scope">
                <span>{{ scope.row.passengerName }}</span>
            </template>
        </el-table-column>
        <el-table-column label="入住房源">
            <template slot-scope="scope">
                <span>{{ scope.row.hotelNo }} - {{ scope.row.hotelName }}</span>
            </template>
        </el-table-column>
        <el-table-column label="入住时间">
            <template slot-scope="scope">
                <span>{{ getCheckInTime(scope.row.checkInDate,scope.row.checkInTime) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="退房时间">
            <template slot-scope="scope">
                <span>{{ getCheckOutTime(scope.row.checkOutDate,scope.row.checkOutTime) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="登记时间">
            <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary"
                        @click="detail(scope.$index, scope.row)">查看详情
                </el-button>
<!--                <el-button-->
<!--                        size="mini"-->
<!--                        @click="edit(scope.$index, scope.row)">编辑-->
<!--                </el-button>-->
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block" style="padding: 30px;">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
        </el-pagination>
    </div>
</div>

<script src="/static/js/DateTimeUtils.js"></script>
<script>

    var vm = new Vue({
        el: '#passengerResidenceInfoLists',
        data: function () {
            var res = ajaxPost("/api/passenger/residence/info/listByParams", {});
            return {
                params: {},
                page: res
            }
        },
        methods: {
            detail: function (index, row) {
                ElementUtils.dialog(vm, "旅客入住信息详情", "/passenger/residence/info/detail", {id: row.id});
            },
            edit: function (index, row) {
                ElementUtils.dialog(vm, "修改", "/passenger/residence/info/edit", {id: row.id});
            }, add: function () {
                ElementUtils.dialog(vm, "新增", "/passenger/residence/info/edit");
            }, handleDelete: function (index, row) {
                ElementUtils.delete(vm, "/api/passenger/residence/info/delete", {id: row.id});
            }, query: function () {
                this.page.current = 1; //查询时默认第一页
                this.refresh();
            }, handleSizeChange(val) {
                this.page.size = val;
                this.page.current = 1;
                this.refresh();
            },
            handleCurrentChange(val) {
                this.page.current = val;
                this.refresh();
            }, refresh: function () {
                const loading = this.$loading();
                this.params.current = this.page.current;
                this.params.size = this.page.size;
                this.page = ajaxPost("/api/passenger/residence/info/listByParams", this.params);
                loading.close();
            },
            getCheckInTime:function (checkInDate,checkInTime) {
                return DateTimeUtils.getCheckInTime(checkInDate,checkInTime);
            },
            getCheckOutTime:function (checkOutDate,checkOutTime) {
                return DateTimeUtils.getCheckOutTime(checkOutDate,checkOutTime);
            },

            showPassportFiles:function(){
                const showHtml = ``;
            },

            resetForm:function(formName) {
                this.$refs[formName].resetFields();
                this.params = {};
            }
        }
    })
</script>
</body>
</html>